{% extends 'myhome/index.html'%}

{% block title %}
<title>个人信息</title>
{% endblock %}

{% block css %}
<link href="/static/myhome/css/personal.css" rel="stylesheet" type="text/css">
<link href="/static/myhome/css/infstyle.css" rel="stylesheet" type="text/css">
{% endblock %}

{% block js%}
<script src="/static/myhome/AmazeUI-2.4.2/assets/js/jquery.min.js" type="text/javascript"></script>
<script src="/static/myhome/AmazeUI-2.4.2/assets/js/amazeui.js" type="text/javascript"></script>
{%endblock%}

{% block con%}
<div class="center">
    <div class="col-main">
        <div class="main-wrap">
            <div class="user-info">
                <!--标题 -->
                <div class="am-cf am-padding">
                    <div class="am-fl am-cf"><strong class="am-text-danger am-text-lg">个人资料</strong></div>
                </div>
                <hr/>
                <form class="am-form am-form-horizontal" action="" method="POST" enctype="multipart/form-data">
                    {% csrf_token%}
                    <!--头像 -->
                    <div class="user-infoPic">
                        <div class="filePic">
                            <input type="file" name="Headpic" class="inputPic" allowexts="gif,jpeg,jpg,png,bmp" accept="image/*">
                            {% if user.Headpic %}
                            <img class="am-circle am-img-thumbnail"  src="{{user.Headpic}}" alt="" />
                            {%else%}
                            <img class="am-circle am-img-thumbnail"  src="/static/myhome/images/getAvatar.do.jpg" alt="" />
                            {%endif%}
                        </div>
                        <p class="am-form-help">头像</p>
                        <div class="info-m">
                            <div><b>用户名：<i>{{user.name}}</i></b></div>
                            <div><b>昵称：<i>{{user.nickname}}</i></b></div>
                            
                        </div>
                    </div>

                    <!--个人信息 -->
                    <div class="info-main">              
                        <div class="am-form-group">
                            <label for="user-name2" class="am-form-label">昵称</label>
                            <div class="am-form-content">
                                <input type="text" name="nickname" value="{{user.nickname}}" id="user-name1" placeholder="设置昵称">
                            </div>
                        </div>

                        <div class="am-form-group">
                            <label for="user-name2" class="am-form-label">姓名</label>
                            <div class="am-form-content">
                                <input type="text"  name="name" value="{{user.name}}" id="user-name2" placeholder="{{user.name}}">
                            </div>
                        </div>

                        <div class="am-form-group">
                            <label for="user-name" class="am-form-label">密码</label>
                            <div class="am-form-content">
                                <input type="password" name="password1" value="" id="password1" placeholder="********">
                            </div>
                        </div>

                        <div class="am-form-group" style="display:none" >
                            <label for="user-name" class="am-form-label">确认密码</label>
                            <div class="am-form-content">
                                <input type="password" name="password2" value="" id="password2" placeholder="********" >
                            </div>
                        </div>

                        <div class="am-form-group">
                            <label class="am-form-label">性别</label>
                            <div class="am-form-content sex">
                                <label class="am-radio-inline">
                                    <input {% if user.sex == '1' %} checked {% endif%} type="radio" name="sex" value="1" data-am-ucheck> 男
                                </label>
                                <label class="am-radio-inline">
                                    <input {% if user.sex == '0' %} checked {% endif%} type="radio" name="sex" value="0" data-am-ucheck> 女
                                </label>
                                <label class="am-radio-inline">
                                    <input {% if user.sex == '2' %} checked {% endif%} type="radio" name="sex" value="2" data-am-ucheck> 保密
                                </label>
                            </div>
                        </div>

                        <div class="am-form-group">
                            <label for="user-phone" class="am-form-label">年龄</label>
                            <div class="am-form-content">
                                <input name="age" value="{{user.age}}" id="user-phone" placeholder="{{user.age}}" type="age">
                            </div>
                        </div>

                        <div class="am-form-group">
                            <label for="user-phone" class="am-form-label">电话</label>
                            <div class="am-form-content">
                                <input name="phone" value="{{user.phone}}" id="user-phone" placeholder="{{user.phone}}" type="tel">
                            </div>
                        </div>
                        <div class="am-form-group">
                            <label for="user-email" class="am-form-label">电子邮件</label>
                            <div class="am-form-content">
                                <input name="email"  id="user-email" placeholder="{{user.email}}" type="email">
                            </div>
                        </div>
                        <div class="info-btn">
                            <input type="submit" id="tj" class="am-btn am-btn-danger" value="保存修改">
                        </div>
                    </div>
                </form>
            </div>

        </div>

    </div>
 

    <aside class="menu">
        <ul>
            <li class="person">
                <a href="{% url 'myhome_myinfo_index'%}">个人中心</a>
            </li>
            <li class="person">
                <a href="#">个人资料</a>
                <ul>
                    <li class="active"> <a href="{%url 'myhome_myinfo_userinfo'%}">个人信息</a></li>
                    <li> <a href="safety.html">安全设置</a></li>
                    <li> <a href="{% url 'myhome_myinfo_address' %}">收货地址</a></li>
                </ul>
            </li>
            <li class="person">
                <a href="#">我的交易</a>
                <ul>
                    <li><a href="{%url 'myhome_myinfo_order'%}">订单管理</a></li>
                    <li> <a href="change.html">退款售后</a></li>
                </ul>
            </li>
            <li class="person">
                <a href="#">我的资产</a>
                <ul>
                    <li> <a href="coupon.html">优惠券 </a></li>
                    <li> <a href="bonus.html">红包</a></li>
                    <li> <a href="bill.html">账单明细</a></li>
                </ul>
            </li>

            <li class="person">
                <a href="#">我的小窝</a>
                <ul>
                    <li> <a href="collection.html">收藏</a></li>
                    <li> <a href="foot.html">足迹</a></li>
                    <li> <a href="comment.html">评价</a></li>
                    <li> <a href="news.html">消息</a></li>
                </ul>
            </li>

        </ul>

    </aside>
</div>


<script>
// 密码框绑定获取焦点获取焦点事件
$("#password1").focus(function(){
    $("#password2").parents(".am-form-group").css('display','block')
})

// 判断两次密码是否一样

$("#tj").click(function(){
    var pwd1 = $("#password1").val()
    var pwd2 = $("#password2").val()
    if(pwd1 != pwd2){
        alert('两次密码不一样,请重新输入')
        return false
    }else{
        $("#password1").val(pwd1)
        $("#password2").val(pwd2)   
    }
})
</script>
{%endblock%}